<template>
    <div>
        <ul class="nav-tabs">
  
    <li :class="{ active: activeTab === 'popular' }">
      <router-link to="/popular" @click.native="setActiveTab('popular')">热门</router-link>
    </li>
    <li :class="{ active: activeTab === 'outfit' }">
      <router-link to="/outfit" @click.native="setActiveTab('outfit')">穿搭</router-link>
    </li>
    <li :class="{ active: activeTab === 'beauty' }">
      <router-link to="/beauty" @click.native="setActiveTab('beauty')">美妆</router-link>
    </li>
  </ul>
      <div class="content">
        <img src="../../public/images/LIVE.png" alt="Empty Live">
        <p>宝宝还没有关注的主播开播哦~</p>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  const activeTab = ref('/'); // 默认选中热门
// 定义 setActiveTab 方法来更新 activeTab 的值
function setActiveTab(tabName) {
  activeTab.value = tabName;
}
  </script>
  
  <style scoped>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 60px);
    background-color: #f0f0f0;
  }
  
  img {
    width: 200px;
    margin-bottom: 10px;
  }
  .nav-tabs {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: space-around; /* 使标签均匀分布 */
  background-color: #f8f8f8; /* 背景颜色 */
}

.nav-tabs li {
  display: inline-block; /* 使列表项水平排列 */
  margin: 0; /* 移除默认的外边距 */
}

.nav-tabs a {
  display: block;
  padding: 10px 20px; /* 内边距 */
  text-decoration: none; /* 移除下划线 */
  color: #333; /* 字体颜色 */
}

.nav-tabs .active a {
  border-bottom: 2px solid #e91e63; /* 选中项下划线 */
  color: #e91e63; /* 选中项字体颜色 */
}
  </style>